<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="accordion">
<h2 class="accordion__title">animated Accordion!</h2>
<ul class="accordion__list">
<li class="accordion__item">
<div class="accordion__itemTitleWrap">
<h3 class="accordion__itemTitle">Chartreuse drinking vinegar</h3>
<div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div>
</div>
<div class="accordion__itemContent">
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
</div>
</li>
<li class="accordion__item">
<div class="accordion__itemTitleWrap">
<h3 class="accordion__itemTitle">Hoodie pabst trust fund fap organic</h3>
<div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div>
</div>
<div class="accordion__itemContent">
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it.</p>
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
</div>
</li>
<li class="accordion__item">
<div class="accordion__itemTitleWrap">
<h3 class="accordion__itemTitle">Keytar synth salvia cred</h3>
<div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div>
</div>
<div class="accordion__itemContent">
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it.</p>
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
</div>
</li>
<li class="accordion__item">
<div class="accordion__itemTitleWrap">
<h3 class="accordion__itemTitle">Hashtag jean short</h3>
<div class="accordion__itemIconWrap"><svg viewBox="0 0 24 24"><polyline fill="none" points="21,8.5 12,17.5 3,8.5 " stroke="#FFF" stroke-miterlimit="10" stroke-width="2"/></svg></div>
</div>
<div class="accordion__itemContent">
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it. </p>
<p>Asymmetrical keytar synth salvia cred gluten-free. Single-origin coffee food truck banh mi vice microdosing, helvetica salvia hoodie pabst trust fund fap organic green juice literally. Hashtag jean shorts banh mi put a bird on it.</p>
</div>
</li>
</ul>
</div>
html {
height: 100%;
}
body {
font-family: Helvetica, arial, sans-serif;
background-color: #000;
height: 100%;
background: linear-gradient(to bottom, #020111 10%, #3a3a52 100%);
}
.accordion {
max-width: 500px;
margin: 0 auto;
}
.accordion__title {
font-family: 'industry', sans-serif;
font-weight: 300;
color: #fff;
text-transform: uppercase;
font-size: 1.125em;
}
.accordion__list {
list-style: none;
margin: 0;
padding: 0;
}
.accordion__item {
border-bottom: 1px solid #000;
visibility: hidden;
}
.accordion__item:last-child {
border-bottom: 0;
}
.accordion__item.is-active .accordion__itemTitleWrap::after {
-webkit-transform: translateX(-20%);
transform: translateX(-20%);
}
.accordion__item.is-active .accordion__itemIconWrap {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.accordion__itemTitleWrap {
display: flex;
height: 2.5em;
align-items: center;
padding: 0 1em;
color: #fff;
cursor: pointer;
position: relative;
overflow: hidden;
}
.accordion__itemTitleWrap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100%;
background: #3bade3;
background: linear-gradient(45deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
z-index: 1;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
}
.accordion__itemTitleWrap.is-active::after, .accordion__itemTitleWrap:hover::after {
-webkit-transform: translateX(-20%);
transform: translateX(-20%);
}
.accordion__itemIconWrap {
width: 1.25em;
height: 1.25em;
margin-left: auto;
position: relative;
z-index: 10;
}
.accordion__itemTitle {
margin: 0;
font-family: 'industry', sans-serif;
font-weight: 300;
font-size: 1em;
position: relative;
z-index: 10;
}
.accordion__itemContent {
font-size: 0.875em;
height: 0;
overflow: hidden;
background-color: #fff;
padding: 0 1.25em;
}
.accordion__itemContent p {
margin: 2em 0;
}
var Accordion = function() {
var
toggleItems,
items;
var _init = function() {
toggleItems = document.querySelectorAll('.accordion__itemTitleWrap');
toggleItems = Array.prototype.slice.call(toggleItems);
items = document.querySelectorAll('.accordion__item');
items = Array.prototype.slice.call(items);
_addEventHandlers();
TweenLite.set(items, {visibility:'visible'});
TweenMax.staggerFrom(items, 0.9,{opacity:0, x:-100, ease:Power2.easeOut}, 0.3)
}
var _addEventHandlers = function() {
toggleItems.forEach(function(element, index) {
element.addEventListener('click', _toggleItem, false);
});
}
var _toggleItem = function() {
var parent = this.parentNode;
var content = parent.children[1];
if(!parent.classList.contains('is-active')) {
parent.classList.add('is-active');
TweenLite.set(content, {height:'auto'})
TweenLite.from(content, 0.6, {height: 0, immediateRender:false, ease: Back.easeOut})
} else {
parent.classList.remove('is-active');
TweenLite.to(content, 0.3, {height: 0, immediateRender:false, ease: Power1.easeOut})
}
}
return {
init: _init
}
}();
Accordion.init();
